<template>
    <div class="exchange_container">
        <HeaderTop :goBack="true" :headTitle="'兑换红包'"></HeaderTop>
        <form class="exchange_code">
            <input type="text" placeholder="请输入兑换码" v-model="exchangeCode" class="exchange_input">
            <section class="input_container captcha_code_container">
                <input type="text" placeholder="验证码" maxlength="4" v-model="codeNumber" >
                <div class="img_change_img">
                    <img v-show="captchaCodeImg" :src="captchaCodeImg">
                    <div class="change_img" @click="getCaptchaCode">
                        <p>看不清</p>
                        <p>换一张</p>
                    </div>
                </div>
            </section>
        </form>
        <div class="determine" @click="exchange" :class="{active: status}">兑换</div>
        <alert-tip v-if="showAlert" :alertText="alertText" @close="closeAlert"></alert-tip>
    </div>
</template>

<script>
import HeaderTop from '@src/components/header/HeaderTop';
import {getcaptchas,exChangeHongbao} from '@src/api/getData'
import AlertTip from '@src/components/common/AlertTips'
import {mapState} from 'vuex'
export default {
    components:{
        HeaderTop,
        AlertTip
    },
    data(){
        return {
            exchangeCode:'',
            codeNumber:'',
            captchaCodeImg:'',
            showAlert: false,
            alertText:'',
            succ:false
        }
    },
    computed:{
        ...mapState(['user']),
        status(){
            console.log('computed')
            if(/^\d{10,15}$/gi.test(this.exchangeCode) && /^\w{4}$/gi.test(this.codeNumber)){
                return true;
            }else{
                return false;
            }
        }
    },
    created(){
        this.getCaptchaCode();
    },
    methods:{
        async getCaptchaCode(){
            let res = await getcaptchas();
            if(res.status === 1){
                this.captchaCodeImg = res.code;
            }
        },
        async exchange(){
            if(this.status){
                let res = await exChangeHongbao(this.user.user_id, this.exchangeCode, this.codeNumber);
                if(res.status === 0){
                    this.alertText=res.message;
                    this.showAlert=true;
                }else{
                    this.alertText='兑换成功';
                    this.succ=true;
                    this.showAlert=true;
                }
            }
        },
        closeAlert(){
            this.showAlert=false;
            if(this.succ){
                this.$router.go(-1);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.exchange_container{
    padding-top: 1.95rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f2f2f2;
    z-index: 214;
    overflow-y: scroll;
    p, span{
        font-family: Helvetica Neue,Tahoma,Arial;
    }
    .exchange_code{
        margin-top: 0.7rem;
        padding: 0 0.5rem;
        .exchange_input{
            @include sc(0.7rem,#666);
            width: 100%;
            padding: 0.5rem 0.4rem;
            border-radius: 0.15rem;
        }
        .input_container{
            margin-top: 0.8rem;
            display: flex;
            height: 2.2rem;
        
            input{
                flex: 3;
                @include sc(0.7rem,#666);
                padding: 0.5rem 0.4rem;
                border-radius: 0.15rem;
                box-sizing: border-box;
                margin-right: 0.4rem;
            }
            .img_change_img{
                display: flex;
                align-items: center;
                flex: 2;
                background: #fff;
                padding-left: 0.2rem;
                img{
                    @include wh(3.5rem, 1.5rem);
                    margin-right: 0.2rem;
                }
                .change_img{
                    height: 100%;
                    @include fj(center);
                    flex-direction: column;
                    align-items: center;
                    font-size: 0.55rem;
                    p:nth-of-type(2){
                        color: $blue;
                    }
                }
            }
        }
    }
    .determine{
        margin: 0 0.5rem;
        margin-top: 0.7rem;
        @include sc(0.7rem,#fff);
        font-weight: 700;
        padding: 0.5rem 0;
        background: #ccc;
        text-align: center;
        border-radius: 0.15rem;
        &.active{
            background-color: $green;
        }
    }
}

</style>